// @ts-nocheck
export const generatorRow = (data: any) => {
  return `
<div nz-row>
    ${data.children.length ? generatorChildren(data) : ''}
</div>
`;
};

export const generatorChildren = (data: any) => {
  let html = '';
  data.children.map((item: any) => {
    const map = {
      Input: () => generatorInput(item),
      Cascader: () => generatorCascader(item),
      CheckboxGroup: () => generatorCheckBoxGroup(item),
      DatePicker: () => generatorDatePicker(item),
      InputNumber: () => generatorInputNumber(item),
      RadioGroup: () => generatorRadioGroup(item),
      Select: () => generatorSelect(item),
      Switch: () => generatorSwitch(item),
      TimePicker: () => generatorTimePicker(item),
      TreeSelect: () => generatorTreeSelect(item),
      Upload: () => generatorUpload(item),
    };
    if (map[item.name]) {
      html += `
  <div nz-col nzSpan="${24 / data.children.length}">
    ${map[item.name]()}
  </div>`;
    }
  });
  return html;
};

export const generatorInput = (data: any) => {
  return `
    <nz-form-item>
      <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
      <nz-form-control nzSpan="16">
        <input type="text" nz-input [(ngModel)]="formMap.${data.field}" formControlName="${data.field}"
         placeholder="${data.placeholder}" size="${data.size}">
      </nz-form-control>
    </nz-form-item>`;
};


export const generatorCascader = (data: any) => {
  return `
    <nz-form-item>
      <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
      <nz-form-control nzSpan="16">
        <nz-cascader
          [(ngModel)]="formMap.${data.field}"
          formControlName="${data.field}"
          nzPlaceHolder="${data.placeholder}"
          nzSize="${data.size}"
          [nzOptions]="${data.field}List"
          nzExpandTrigger="${data.expandTrigger}"
          [nzShowArrow]="${data.showArrow}"
          [nzAllowClear]="${data.allowClear}"
          [nzShowSearch]="${data.showSearch}">
        </nz-cascader>
      </nz-form-control>
    </nz-form-item>`;
};


export const generatorCheckBoxGroup = (data: any) => {
  return `
    <nz-form-item>
      <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
      <nz-form-control nzSpan="16">
        <nz-checkbox-group [(ngModel)]="formMap.${data.field}List" formControlName="${data.field}">
        </nz-checkbox-group>
      </nz-form-control>
    </nz-form-item>
  `;
};


export const generatorDatePicker = (data: any) => {
  if (data.isRange) {
    return `
    <nz-form-item>
      <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
      <nz-form-control nzSpan="16">
        <nz-range-picker [(ngModel)]="formMap.${data.field}" formControlName="${data.field}"
          [nzShowTime]="${data.showTime}"
          nzFormat="${data.showTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'}"
          [nzAllowClear]="${data.allowClear}">
        </nz-range-picker>
      </nz-form-control>
    </nz-form-item>
    `;
  }
  return `
    <nz-form-item>
      <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
      <nz-form-control nzSpan="16">
        <nz-date-picker [(ngModel)]="formMap.${data.field}" formControlName="${data.field}"
          [nzShowTime]="${data.showTime}"
          nzFormat="${data.showTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'}"
          nzPlaceHolder="${data.placeholder}" [nzAllowClear]="${data.allowClear}">
        </nz-date-picker>
      </nz-form-control>
    </nz-form-item>
  `;
};


export const generatorInputNumber = (data: any) => {
  return `
  <nz-form-item>
    <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
    <nz-form-control nzSpan="16">
      <nz-input-number [(ngModel)]="formMap.${data.field}" formControlName="${data.field}"
        nzPlaceHolder="${data.placeholder}"
        nzSize="${data.size}"
        [nzMin]="${data.min}"
        [nzMax]="${data.max}">
      </nz-input-number>
    </nz-form-control>
  </nz-form-item>
  `;
};


export const generatorRadioGroup = (data: any) => {
  return `
  <nz-form-item>
    <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
    <nz-form-control nzSpan="16">
      <nz-radio-group [(ngModel)]="formMap.${data.field}" formControlName="${data.field}">
          <label nz-radio *ngFor="let item of ${data.field}List" [nzValue]="item.value">{{item.label}}</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>
  `;
};

export const generatorSelect = (data: any) => {
  return `
  <nz-form-item>
    <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
    <nz-form-control nzSpan="16">
      <nz-select class="w100" [(ngModel)]="formMap.${data.field}" formControlName="${data.field}"
        nzPlaceHolder="${data.placeholder}"
        nzSize="${data.size}"
        [nzAllowClear]="${data.allowClear}"
        [nzShowArrow]="${data.showArrow}"
        [nzShowSearch]="${data.showSearch}"
        ${data.mode !== 'default' ? `nzMode="${data.mode}"` : ''}
        ${data.mode !== 'default' ? `nzMaxTagCount="${data.maxTagCount}"` : ''}>
        <nz-option *ngFor="let item of ${data.field}List" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  `;
};


export const generatorSwitch = (data: any) => {
  return `
  <nz-form-item>
    <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
    <nz-form-control nzSpan="16">
      <nz-switch [(ngModel)]="formMap.${data.field}" formControlName="${data.field}"
        nzSize="${data.size}"
        nzCheckedChildren="${data.checkedChildren}"
        nzUnCheckedChildren="${data.unCheckedChildren}">
      </nz-switch>
    </nz-form-control>
  </nz-form-item>
  `;
};


export const generatorTimePicker = (data: any) => {
  return `
  <nz-form-item>
    <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
    <nz-form-control nzSpan="16">
      <nz-time-picker [(ngModel)]="formMap.${data.field}" formControlName="${data.field}"
         nzPlaceHolder="${data.placeholder}"
         nzFormat="${timePickerFormat(data)}"
         ${data.hourStep === 1 ? '' : `nzHourStep="${data.hourStep}"`}
         ${data.minuteStep === 1 ? '' : `nzMinuteStep="${data.minuteStep}"`}
         ${data.showSeconds ? (data.secondStep === 1 ? '' : `nzSecondStep="${data.secondStep}"`) : ''}>
      </nz-time-picker>
    </nz-form-control>
  </nz-form-item>
  `;
};


export const generatorTreeSelect = (data: any) => {
  return `
  <nz-form-item>
    <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
    <nz-form-control nzSpan="16">
      <nz-tree-select [(ngModel)]="formMap.${data.field}" formControlName="${data.field}"
        nzPlaceHolder="${data.placeholder}"
        nzSize="${data.size}"
        [nzCheckable]="${data.checkable}"
        [nzAllowClear]="${data.allowClear}"
        [nzShowSearch]="${data.showSearch}"
        ${data.checkable ? `nzMaxTagCount="${data.maxTagCount}"` : ''}
        [nzNodes]="${data.field}List">
      </nz-tree-select>
    </nz-form-control>
  </nz-form-item>
  `;
};


export const generatorUpload = (data: any) => {
  return `
  <nz-form-item>
    <nz-form-label nzSpan="8"${data.required ? ' nzRequired' : ''}>${data.label}</nz-form-label>
    <nz-form-control nzSpan="16">
      <nz-upload
        [nzAction]="uploadUrl"
        [nzHeaders]="headerInfo"
        [nzData]="{'moduleName': '${data.moduleName}'}"
        nzListType="${data.listType}"
        [nzRemove]="${data.field}DeleteFile"
        (nzChange)="${data.field}GetUploadInfo($event)"
        [(nzFileList)]="${data.field}FileList"
        nzAccept="${data.accept.join(',')}"
      >
        <i nz-icon nzType="plus"></i>
      </nz-upload>
    </nz-form-control>
  </nz-form-item>
  `;
};

export const generatorTable = (data: any) => {
  return `
  <div class="table-box">
    <ng-template #totalTemplate${firstUpperCase(data.field)}>
      总共 {{ ${isUpperCase(data, 'crud')}.pageInfo.totalRecords ? ${isUpperCase(data, 'crud')}.pageInfo.totalRecords: 0 }} 条
    </ng-template>
    <nz-table
      nzBordered
      [nzData]="${isUpperCase(data, 'crud')}.dataList"
      [nzFrontPagination]="false"
      [nzShowPagination]="true"
      [nzPageIndex]="${isUpperCase(data, 'crud')}.pageInfo.first"
      [nzTotal]="${isUpperCase(data, 'crud')}.pageInfo.totalRecords"
      [nzShowTotal]="totalTemplate${firstUpperCase(data.field)}"
      [nzPageSize]="${isUpperCase(data, 'crud')}.pageInfo.rows"
      [nzLoadingDelay]="1"
      [nzPageSizeOptions]="[10, 20, 30, 50, 100]"
      [nzShowQuickJumper]="true"
      [nzShowSizeChanger]="true"
      (nzPageIndexChange)="${isUpperCase(data, 'crud')}.searchPageIndex($event)"
      (nzPageSizeChange)="${isUpperCase(data, 'crud')}.searchPageSize($event)"
    >
      <thead${hasSort(data) ? ` (nzSortChange)="${isUpperCase(data, 'crud')}.sort($event)" nzSingleSort="false"` : ''}>
        <tr>
          ${data.hasChecked ? `<th class="tableCheck"
                nzShowCheckbox
                [(nzChecked)]="${isUpperCase(data, 'crud')}.isAllCheck"
                [nzIndeterminate]="${isUpperCase(data, 'crud')}.isIndeterminate"
                (nzCheckedChange)="${isUpperCase(data, 'crud')}.checkAll($event)"
          ></th>` : ''}
          ${data.hasIndex ? `<th>序号</th>` : ''}
          ${generatorThByColumns(data)}
          ${data.hasOperate ? `<th>操作</th>` : ''}
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of ${isUpperCase(data, 'crud')}.dataList${data.hasIndex ? `; let i = index` : ''}">
         ${data.hasChecked ? `  <td
              nzShowCheckbox
              [(nzChecked)]="${isUpperCase(data, 'crud')}.mapOfCheckedId[item.id]"
              (nzCheckedChange)="${isUpperCase(data, 'crud')}.refreshStatus()"
            ></td>` : ''}
         ${data.hasIndex ? `  <td>{{i + 1}}</td>` : ''}
         ${generatorTdByColumns(data)}
         ${data.hasOperate ? generatorOperate(data) : ''}
        </tr>
      </tbody>
    </nz-table>
  </div>
  `;
};


/**
 * 根据columns生成th
 * @param data 表格数据配置
 */
export const generatorThByColumns = (data: any) => {
  let thStr = '';
  data.columns.map(item => {
    if (!item.isSort && !item.showFilter && !item.customFilter) {
      thStr += `
          <th>${item.title}</th>
      `;
    }
    if (item.isSort && !item.showFilter && !item.customFilter) {
      thStr += `
          <th nzShowSort nzSortKey="${item.field}">${item.title}</th>
      `;
    }
    if (item.showFilter) {
      thStr += `
          <th
             nzShowFilter
             ${item.isSort ? `nzShowSort nzSortKey="${item.field}"` : ''}
             [nzFilterMultiple]="${item.filterMultiple}"
             [nzFilters]="${item.field}List"
             (nzFilterChange)="${isUpperCase(data, 'crud')}.${item.filterMultiple ? 'filterCheckField' : 'filterSingleCheckField'}($event, '${item.field}')"
          >${item.title}</th>
      `;
    }
    if (item.customFilter) {
      thStr += `
          <th nzCustomFilter${item.isSort ? ` nzShowSort nzSortKey="${item.field}"` : ''}>
            ${item.title}
            <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter #dropdown>
              <i nz-icon nzType="search" class="ant-table-filter-icon"
                 [class.ant-table-filter-open]="dropdown.nzVisible"
                 nz-dropdown></i>
              <div class="search-box" style="width: 150px">
                <input type="text" nz-input placeholder="请输入${item.title}" [(ngModel)]="${isUpperCase(data, 'crud')}.searchParam.${item.field}"/>
                <button nz-button nzSize="small" nzType="primary" (click)="${isUpperCase(data, 'crud')}.clickSearch()" class="search-button">
                  搜索
                </button>
                <button nz-button nzSize="small" (click)="${isUpperCase(data, 'crud')}.resetTable('${item.field}')">重置</button>
              </div>
            </nz-dropdown>
          </th>
      `;
    }
  });
  return thStr;
};


/**
 * 根据columns生成td
 * @param data 表格数据配置
 */
export const generatorTdByColumns = (data: any) => {
  let tdStr = '';
  data.columns.map(item => {
    tdStr += `
           <td>{{item.${item.field}}}</td>
    `;
  });
  return tdStr;
};


/**
 * 生成操作列
 * @param data 表格数据配置
 */
export const generatorOperate = (data: any) => {
  return `
           <td>
             <span class="operaFont firOpera">编辑</span>
             <span class="operaFont operaTao"
               nz-popconfirm
               nzOkType="danger"
               nzTitle="确定删除该数据吗?"
               (nzOnConfirm)="${isUpperCase(data, 'crud')}.deleteOne(item.id)"
               nzPlacement="top"
             >删除</span>
           </td>
  `;
};

export const generatorEChart = () => {
  return `<div class="chart-comp"></div>`;
};


/**
 * 时间格式
 * @param data 数据
 */
export const timePickerFormat = (data: any) => {
  if (data.showSeconds) {
    return 'HH:mm:ss';
  }
  return 'HH:mm';
};


/**
 * 首字母大写
 * @param str 字符串
 */
export const firstUpperCase = (str: string) => {
  if (!str) {
    return '';
  }
  return str.charAt(0).toUpperCase() + str.slice(1);
};

/**
 * 首字母小写
 * @param str 字符串
 */
export const firstLowerCase = (str: string) => {
  if (!str) {
    return '';
  }
  return str.charAt(0).toLowerCase() + str.slice(1);
};

export const isUpperCase = (data: any, type) => {
  return data.field ? (data.field + firstUpperCase(type)) : type;
};

/**
 * 判断表格是否有字段开启排序
 * @param data 表格配置数据
 */
export const hasSort = (data: any) => {
  let flag = false;
  data.columns.map(item => {
    if (item.isSort) {
      flag = true;
    }
  });
  return flag;
};
